<template>
  <div class="dictionary">
		<el-input
	        v-model="keyword"
	        placeholder="请输入关键字"
	        class="input-with-select"
			style="width:70%"
		>
	    <template #append>				
	        <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
	    </template>       
		</el-input>
		<el-button primary @click="addInit">+增加</el-button>
		<el-button primary @click="cimsInputClick">dict_item管理</el-button>
     <el-table :data="tableData" style="width: 100%" :stripe="true"
		 ref="multipleTable"
		    @selection-change="handleSelectionChange"
		    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
		 >
		<el-table-column min-width="15%" type="selection"></el-table-column>
        <el-table-column prop="id" label="编号" sortable  width="80" />
        <el-table-column prop="description" label="名称" sortable />
		<el-table-column label="操作" >
			<template #default="scope">
				<el-button type="primary" @click="editInit(scope.row)" circle><el-icon><Edit /></el-icon></el-button>
				<el-button type="danger"  @click="handleDelete(scope.row.id)" circle><el-icon><Delete /></el-icon></el-button>
			</template>				
		</el-table-column>
	  </el-table>
		  <el-pagination
		    small
		    background
		    layout="prev, pager, next"
			:page-size="pageSize"
		    :page-count="pageCount"
			:current-page="currentPage"
			@current-change="haddlePageChange"
		  />
	
	  
	  <!-- 增加对话框 -->
	  <el-dialog v-model="dialogVisible" title="增加" width="60%" draggable>
	        <!-- <span>增加</span> -->
	  	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	  	      <el-form-item label="名称" prop="description">
	  	        <el-input v-model="form.description" />
	  	      </el-form-item>
	  	   </el-form>
	        <template #footer>
	          <span class="dialog-footer">
	            <el-button @click="dialogVisible = false">取消</el-button>
	            <el-button type="primary" @click="addSubmit()">提交</el-button
	            >
	          </span>
	        </template>
	      </el-dialog>
	  <!--  修改对话框 -->
	  <el-dialog v-model="editVisible" title="修改" width="60%" draggable>
	    <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	        <el-form-item label="编号" prop="id">
	          <el-input v-model="form.id" />
	        </el-form-item>
	        <el-form-item label="名称" prop="description">
	          <el-input v-model="form.description" />
	        </el-form-item>
	     </el-form>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="editVisible = false" >取消</el-button>
	        <el-button type="primary" @click="editSubmit()">提交</el-button
	        >
	      </span>
	    </template>
	  </el-dialog> 
  </div>
</template>

<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
	import{ useRouter } from 'vue-router'
	let { proxy } = getCurrentInstance();
	// import TEditor from '../components/TEditor.vue'
	
	var tableData=ref([]);
	var pageCount=ref(0)//总页数
	var pageSize=ref(2)
	var currentPage=ref(1)
	
	let pagination=ref({
		"pagination":{
			"pageNo":currentPage,
			"pageSize":pageSize,
		}
	})
	function getTableData(){
	    proxy.$http.post("/dictionaryFind",pagination.value,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			tableData.value=res.data.data;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=res.data.totalPages;
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	onMounted(()=>{
		getTableData();  //请求第一页的表格数据
	});
	
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();		
	}

	let form=ref({});//修改或增加的一个对象	
	
	const dialogVisible = ref(false)//增加对话框是否显示
	function addInit(){
		dialogVisible.value = true
	}
	function addSubmit(){
		proxy.$http.post("/dictionary",form.value,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			dialogVisible.value = false //关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空增加对象
			alert(res.data.message)
			
		})
	}
	
	let editVisible=ref(false)
	const editInit = (row) => {
		editVisible.value = true
	}
	const editSubmit=()=>{
		proxy.$http.put("/dictionary",form.value,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			editVisible.value = false	//关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空修改对象
			alert(res.data.message)	
		})
	}
	const handleDelete = (id) => {
	  proxy.$http.delete('/dictionary?id='+id,
	  {"headers":{"token":window.sessionStorage.getItem("token")}})
	  .then(res => {
	  	alert(res.data.message)
		getTableData();
	  })
	}
	
	let multipleSelection=ref([]);
	const handleSelectionChange=(val)=>{ //批量选择
		multipleSelection.value = val;
		//console.log(multipleSelection.value)
	}
	
	//按关键字查询
	const keyword=ref('')
	let findByName = ref({
    "pagination":{
        "pageNo":currentPage,
        "pageSize":pageSize
    },
    "conditionList":[
        {     "value":keyword,
             "key":"description",
                "operator":"LIKE"
        }
    ]
})
	let search=()=>{
		if(keyword.value=='')
			keyword.value=null
		proxy.$http.post('/dictionaryFind',findByName.value,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			tableData.value=res.data.data;//把获取的服务端数据数组传递给tableData
			pageCount.value=res.data.totalPages;
			keyword.value==''
		})
		.catch(err => {
			console.log(err)
		});
	}
	// 指定跳转路由
	function cimsInputClick () {
	      window.location.href = 'http://localhost:8050/home/dict'
	    }

	const isNum = (rule, value, callback) => {
		const id = /^[0-9]*$/
		if(value==''||value==null)  //补充了非空和长度校验
		    callback(new Error('编号不能为空!'))
		else if (!id.test(value)) {
			callback(new Error('请输入数字!'))
		} else {
			callback()
		}	  

	};
	const formRules = reactive({
		id: [
		  {validator: isNum,required: true,trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],		
		description: [
		  {required: true, message: '请输入名称', trigger: 'blur'},
		  {min: 3, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
		],		
	})
				
</script>
